<template>
  <view>
    <view class="after-sales-goods-detail-view">
      <!-- <view class="header">
        <view>
          本次售后服务将由
          <text class="seller-name">{{ sku.storeName }}</text>
          为您提供
        </view>
      </view> -->
      <view>
        <!-- v-if="item.sn == sn" -->
        <view
          class="goods-item-view"
          :key="index"
          v-for="(item, index) in sku.orderItems"
          @click="navigateToGoodsDetail(sku.skuId)"
        >
          <view class="goods-img">
            <u-image
              border-radius="16"
              width="180rpx"
              height="180rpx"
              :src="item.image"
            ></u-image>
          </view>
          <view class="goods-info">
            <view class="goods-title u-line-1">{{ item.name }}</view>
            <view class="goods-price">
              <span>￥{{ item.goodsPrice }}</span>
              <span class="num">x{{ item.num }}</span>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="select-view">
      <view
        class="select-cell"
        v-if="applyInfo.returnGoods"
        @click="onSelect(1)"
      >
        <view class="select-image">
          <image
            style="height: 42rpx; width: 42rpx"
            src="/static/img/shouhou.png"
          ></image>
        </view>
        <view class="select-sub-title">
          <span>退货/退款</span>
          <span>退回收到的商品</span>
        </view>
        <u-icon name="arrow-right" color="#bababa"></u-icon>
      </view>
      <view
        class="select-cell"
        v-if="applyInfo.returnMoney"
        @click="onSelect(3)"
      >
        <view class="select-image">
          <image
            style="height: 42rpx; width: 42rpx"
            src="/static/img/shouhou.png"
          ></image>
        </view>
        <view class="select-sub-title">
          <span>仅退款</span>
          <span>退还商品金额</span>
        </view>
        <u-icon name="arrow-right" color="#bababa"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import { getAfterSaleInfo } from "@/api/after-sale";
import storage from "@/utils/storage";
export default {
  data() {
    return {
      sn: "",
      sku: {}, //sku
      applyInfo: "",
    };
  },
  onLoad(options) {
    this.sn = options.sn;
    this.sku = storage.getAfterSaleData();
    // 查看当前商品是否支持退款退货
    this.init();
  },
  methods: {
    // 初始化数据
    init() {
      getAfterSaleInfo(this.sn).then((response) => {
        if (response.data.success) {
          this.applyInfo = response.data.result;
        }
      });
    },

    /**
     * 选择退货流程
     */
    onSelect(value) {
      uni.redirectTo({
        url: `./afterSalesDetail?sn=${this.sn}&value=${value}`,
      });
    },

    /**
     * 跳转到商品信息
     */
    navigateToGoodsDetail(id) {
      uni.navigateTo({
        url: `/pages/product/goods?id=${id}&goodsId=${goodsId}`,
      });
    },
  },
};
</script>

<style lang="scss">
@import "./goods.scss";

page,
.content {
  background: #fafafa;
  height: 100%;
  padding: 16rpx;
}
.after-sales-goods-detail-view {
  background-color: #fff;
  .header {
    background-color: #f7f7f7;
    color: #999999;
    font-size: 22rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    line-height: 70rpx;
    .header-text {
      background-color: #999999;
      padding: 10rpx 30rpx;
      border-radius: 50rpx;
    }
    .seller-name {
      color: $main-color;
    }
  }
}
.select-view {
  background-color: #fff;
  margin-top: 16rpx;
  padding: 32rpx 24rpx;
  border-radius: 16rpx;
  .select-cell {
    display: flex;
    margin-bottom: 54rpx;
    .select-image {
      width: 42rpx;
    }
    .select-sub-title {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 16rpx;
      flex: 1;
      span {
        margin-bottom: 12rpx;
      }
    }
  }
  .select-cell:last-child {
    margin-bottom: 0;
  }
}
</style>
